import React, { createRef } from 'react';

import {
    message,
    Form,
    Input,
    Button,
    Select,
    InputNumber,
    Switch,
    Upload
} from 'antd';
import { PlusOutlined } from '@ant-design/icons'
import { connect } from 'react-redux'
import request, { baseUrl } from '@/utils/request'
import { withNavigate } from '../../../utils/hoc';

class Add extends React.PureComponent {
    state = {
        goods: {
            category: '拌面',
            online: true
        },
        category: [],

        // 用于存放商品商品文件列表
        fileList: []
    }

    // 添加商品
    submit = async (values) => {
        const { navigate } = this.props;
        const { fileList } = this.state;
        const { data } = await request.post('/menu/addDishes', values)
        console.log('data', data.data.insertId)
        if (data.code === 200) {
            const formData = new FormData()
            formData.set('dishes_id', data.data.insertId)

            fileList.forEach(item => {
                formData.append('dishes_img', item)
            })
            console.log('formData', formData)

            const { data: uploadData } = await request.post('/menu/upload', formData)
            if (uploadData.code === 200) {
                message.success('菜品添加成功')
                navigate('/manage/goods/list')
            }
        }
    }

    UNSAFE_componentWillMount() {
        this.rules = {
            goods_name: [{
                required: true,
                message: '请填写商品名称'
            }]
        }
    }
    componentDidMount() {
        this.myform = createRef()


        request.get('/category').then(({ data }) => {
            console.log(data);
            this.setState({
                category: data.data
            })
        })
    }

    beforeUpload = (file) => {
        this.setState({fileList:[...this.state.fileList, file]})
        console.log(file);
    }
    uploadGoodsImage = () => {
        const { user } = this.props
        // request.post('/upload/goods',{
        //     userid:user._id,
        //     goodsid
        // })
    }


    render() {
        const { rules, submit } = this;
        const { goods, category } = this.state;

        return (
            <Form
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 18 }}
                layout="horizontal"
                initialValues={goods}
                onFinish={submit}
            >
                <Form.Item label="菜品名称" name="dishes_name" rules={rules.goods_name}>
                    <Input />
                </Form.Item>
                <Form.Item label="菜品分类" name='category'>
                    <Select>
                        {
                            category.map(item => (

                                <Select.Option key={item.id} value={item.category}>{item.category}</Select.Option>
                            ))
                        }
                    </Select>
                </Form.Item>
                <Form.Item label="菜品价格" name='price'>
                    <InputNumber />
                </Form.Item>
                <Form.Item label="菜品优惠价" name='sales_price'>
                    <InputNumber />
                </Form.Item>
                <Form.Item label="菜品库存" name='dishes_qty'>
                    <InputNumber />
                </Form.Item>
                <Form.Item label="菜品图片" valuePropName="dishes_img">
                    <Upload listType="picture-card" customRequest={this.uploadGoodsImage} beforeUpload={this.beforeUpload} fileList={this.state.fileList} >
                        <div>
                            <PlusOutlined />
                            <div style={{ marginTop: 8 }}>Upload</div>
                        </div>
                    </Upload>
                </Form.Item>
                <Form.Item label="是否上架" name='online' valuePropName="checked">
                    <Switch />
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 4 }}>
                    <Button type='primary' htmlType='submit'>添加</Button>
                </Form.Item>
            </Form>
        )
    }
}

const mapStateToProps = function (state) {
    return {
        user: state.userInfo
    }
}
Add = connect(mapStateToProps)(Add)

Add = withNavigate(Add)

export default Add;